<template>
	<div class="box">
		<popupBox title="修改密码" @close="closePopup" />
		<div class="form-container">
			<el-form ref="resetFormRef" label-width="100px" :model="aiTaskFormData" :rules="resetRules">
				<el-form-item label="原密码:" prop="oldPwd">
					<el-input v-model="aiTaskFormData.oldPwd" type="password" />
				</el-form-item>
				<el-form-item label="新密码:" prop="newPwd">
					<el-input v-model="aiTaskFormData.newPwd" type="password" />
				</el-form-item>
				<el-form-item label="确认密码:" prop="confirmPwd">
					<el-input v-model="aiTaskFormData.confirmPwd" prop="confirmPwd" type="password" />
				</el-form-item>
				<div class="bottom-btn-group">
					<el-button class="elBtn" @click="createTask(resetFormRef)"> 确定 </el-button>
					<el-button class="failBtn" @click="closePopup"> 取消 </el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import popupBox from "@cps/popupBox/index.vue";
import { ElMessage } from "element-plus";
import { resetPWD } from "@/api/user/index";
import type { FormInstance } from "element-plus";
import { useUserStore } from "@/store";
const userStore = useUserStore();
const getUserId = computed(() => userStore.userId);
const router = useRouter();
const resetFormRef = ref<any>();
const aiTaskFormData = reactive({
	oldPwd: "",
	newPwd: "",
	confirmPwd: "",
});
const resetRules = {
	oldPwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
	newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
	confirmPwd: [
		{
			required: true,
			validator: (rule: any, value: any, callback: any) => {
				if (value !== aiTaskFormData.newPwd) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			},
			trigger: "blur",
		},
	],
};
/* todo 修改密码 */
const closePopup = () => {
	router.push("/main/ai-processing");
};
const createTask = async (formRef: FormInstance) => {
	if (!formRef) return;
	await formRef.validate(async (valid, fields) => {
		if (valid) {
			if (!getUserId.value) {
				return;
			}
			let res = await resetPWD(getUserId.value, aiTaskFormData.newPwd);
			if (res.code !== 200) {
				return;
			}
			ElMessage.success("密码修改成功");
			router.push("/main/ai-processing");
		} else {
			ElMessage.error("请检查输入是否正确");
			console.log("error submit!", fields);
		}
	});
};
</script>

<style lang="scss" scoped>
.box {
	@apply absolute left-0 right-0 z-20 m-auto;
	top: 34vh;
	width: 462px;
	height: 321px;
	background: #031222;
	border-radius: 4px;
}
.form-container {
	padding-top: 32px;
	padding-right: 18px;
}
.bottom-btn-group {
	@apply flex justify-end;
	margin-top: 40px;
	.elBtn {
		height: 36px;
		width: 86px;
		margin-right: 16px;
	}
	.failBtn {
		height: 36px;
		width: 86px;
		margin-right: 24px;
	}
}
</style>
